<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<!--<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">-->

		<title>工具</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">

		<style>
			.mui-control-content {
				margin-left: 2px;
				margin-top: 2px;
				width: 100%;
			}
			
			.mui-scroll-wrapper {
				height: 100%;
			}
			
			.mui-segmented-control {
				border: none;
			}
			
			.mui-segmented-control .mui-control-item {
				border-left: none;
				line-height: 46px;
				color: #000000;
				background-color: #FFFFFF;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				background: none;
				color: #00d5c5;
				border-bottom: 2px solid #00d5c5;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-content-style {
				width: 100%;
				height: 100%;
				position: absolute;
				background-color: #FFFFFF;
			}
			
			.div-size {
				font-size: 12px;
			}
			
			.div1 {
				height: 50px;
				width: 100%;
				border-bottom: 2px solid #d4dde4;
			}
			
			.div2 {
				width: 100%;
				height: 100%;
				margin-top: 2px;
			}
			
			.div3 {
				border-right: 1px solid #d4dde4;
				overflow-y: scroll;
			}
			
			.div4 {
				margin-top: 10%;
				margin-left: 5%;
			}
			
			.div5 {
				background-image: url(../img/bg-input.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 85%;
				height: 40px;
				margin-right: 5%;
				padding: 2px;
			}
			
			.div5 input {
				width: 80%;
				border: none;
				height: 36px;
			}
			
			.div5 img {
				width: 15%;
			}
			
			.div-character1 {
				padding: 10px;
			}
			
			.div-character1 a {
				color: #000000;
				line-height: 50px;
			}
			
			.div-character2 {
				padding: 8px;
				padding-left: 8px;
			}
			
			.div-character2 a {
				color: #000000;
			}
			
			.div-character-bottom {
				border-bottom: 1px solid #d4dde4;
			}
		</style>
	</head>

	<body>

		<div class="mui-content flex v-flex mui-content-style">

			<div class="flex div1">
				<div class="flex-1">
					<img onclick="setting()" style="width: 40px;" src="../img/setting.png" />
				</div>
				<div class="flex-2 flex">
					<div class="mui-content">

						<div id="segmentedControl" class="mui-segmented-control">
							<a class="mui-control-item mui-active" href="#item1">速度</a>
							<a class="mui-control-item" href="#item2">表情</a>
							<a class="mui-control-item" href="#item3">力度</a>
							<a class="mui-control-item" href="#item4">临时</a>
						</div>

					</div>
				</div>
			</div>

			<div class="flex-1 flex div2">
				<div class="flex-1 div3">
					<div class="div-character1">
						<h2>A [英]</h1>	
                     </div>
                     
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     <div class="div-character2 div-character-bottom">
                          <div >柔</div>
                          <div>adagio [英]</div>
                          <div class="div-size">柔板,从容,悠闲的</div>
                     </div>
                     
				</div>
	            <div class="flex-2 flex">
					<div id="item1" class="mui-control-content mui-active">
						<div id="scroll" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="flex h-center div5 div4" >
									<input placeholder="速度搜索"  type="text" />
									<img  src="../img/icon-search.png"/>
								</div>
								<div class="div4" >
									<img onclick="onPlayImg()" style="width: 40px;" src="../img/icon-play.png" />
								</div>
								<div class="div4">
									<div>adagio [英]</div>
                                    <div class="div-size">
                                    	柔板,从容,悠闲的
                                    </div>
                   					<div id="showshow" style="width: 0px;height: 0px;">
                   						
                   					</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item2" class="mui-control-content">
						<div class="flex h-center div5 div4" >
									<input placeholder="表情搜索" type="text" />
									<img  src="../img/icon-search.png"/>
								</div>
								<div class="div4">
									<img style="width: 40px;" src="../img/icon-play.png" />
								</div>
								<div class="div4">
									<div>adagio [英]</div>
                                    <div class="div-size">
                                    	柔板,从容,悠闲的
                                    </div>
								</div>
					</div>
					<div id="item3" class="mui-control-content">
						<div class="flex h-center div5 div4" >
									<input placeholder="力度搜索"  type="text" />
									<img  src="../img/icon-search.png"/>
								</div>
								<div class="div4">
									<img style="width: 40px;" src="../img/icon-play.png" />
								</div>
								<div class="div4">
									<div>adagio [英]</div>
                                    <div class="div-size">
                                    	柔板,从容,悠闲的
                                    </div>
								</div>
					</div>

					<div id="item4" class="mui-control-content">
						<div class="flex h-center div5 div4" >
									<input placeholder="临时搜索"  type="text" />
									<img  src="../img/icon-search.png"/>
								</div>
								<div class="div4">
									<img style="width: 40px;" src="../img/icon-play.png" />
								</div>
								<div class="div4">
									<div>adagio [英]</div>
                                    <div class="div-size">
                                    	柔板,从容,悠闲的
                                    </div>
								</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script type="text/javascript" src="../js/str-utf-8.js" ></script>
		<script src="../js/audio-play.js"></script>
		<script>
			mui.init();
			
//			var dogBarkingBuffer = null;
//			window.AudioContext = window.AudioContext||window.webkitAudioContext;
//			var context = new AudioContext();
//			//可以播放  使用的是WebAudio API
//			function loadDogSound(url){
//			    var request = new XMLHttpRequest();
//			    request.open('GET',url,true);
//			    request.responseType= 'arraybuffer';
//				//下面就是对音频文件的异步解析
//				request.onload = function(){
//				    context.decodeAudioData(request.response,function(buffer){
//				    dogBarkingBuffer = buffer;
//				    playSounde(dogBarkingBuffer);   //播放
//				    //printLog("进进进+++"+dogBarkingBuffer.length);
//				   },null);
//				   
//				}
//			    request.send();				    
//			}
//			
//			function playSounde(buffer){
//			     var source = context.createBufferSource();
//			     //source = context.createBuffersource();//创建一个音频源 相当于是装音频的容器
//			    source.buffer = buffer;//  告诉音频源 播放哪一段音频
//			    source.connect(context.destination);// 连接到输出源
//			    source.start(0);//开始播放
//			}
			
			function onPlayImg(){
				//startPlay("../css/friendship.mp3");
				var zhText = EncodeUtf8("你好啊");
	            var url = 'http://tsn.baidu.com/text2audio?tex='+ zhText +'&lan=zh&ctp=1&cuid=1871115&tok=24.9232da8697fe6621dbe221b85bceaea0.2592000.1508395390.282335-10139214';
			    loadDogSound(url,1);//播放,如果设置铃声静音就只有耳机有声音
		        //var zhText = encodeURI("你好啊");
//		        document.write("<audio autoplay='autoplay'>");
//		        document.write("<source src='http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+zhText+"' type='audio/mpeg'/>");
//		        document.write("<embed height='0' width='0' src='http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+zhText+"'/>");
//		        document.write("</audio>");
               // printLog("点击了 ++");
                
			  
			  
                //var url = 'http://tsn.baidu.com/text2audio?tex=%E4%BD%A0%E5%A5%BD%E5%95%8A%2C%E5%82%BB%E9%80%BC&lan=zh&ctp=1&cuid=1871115&tok=24.9232da8697fe6621dbe221b85bceaea0.2592000.1508395390.282335-10139214';
			    //var url ='../css/friendship.mp3';
//			    document.write("<audio autoplay='autoplay'>");
//			    document.write("<source src='"+url+"' type='audio/mpeg'/>");
//			    document.write("<embed height='0' width='0' hidden='true' src='"+url+"'/>");
//			    document.write("</audio>");
		        //类似于网页跳转播放,只不过将跳转的网页显示在了一个0px的div里面
		        //var tt = "<audio autoplay='autoplay'><source src='"+url+"' type='audio/mpeg'/><embed height='0' width='0' hidden='true' src='"+url+"'/></audio>";
		        //document.getElementById("showshow").innerHTML = tt;
		        
			}
			
			//添加newId自定义事件监听
			window.addEventListener('start',function(event){
			  //获得事件参数
			  var id = event.detail.id;
			  loadDogSound("../css/friendship.mp3",2);
			
			});
			
			window.addEventListener('stop',function(event){
			  //获得事件参数
			  printLog("停止");
			  stopSound();
			});
			
			
			//播放按钮,可以获取到从百度得到的音频二进制文件,但没有播放出来
			function onPlayImg2(){
				//跳转到网页可以播放
//				var zhText = "测试百度文字转语音接口 - 卡卡测速网 www.webkaka.com"; 
//				zhText = encodeURI(zhText);
//				document.write("<audio autoplay=\"autoplay\">");
//				document.write("<source src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+ zhText +"\" type=\"audio/mpeg\">");
//				document.write("<embed height=\"0\" width=\"0\" src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+ zhText +"\">");
//				document.write("</audio>");
               printLog("点击了 --");
                    
               
                var text = EncodeUtf8("你好啊,傻逼");
               // printLog("编码后"+text);
                var url = "http://tsn.baidu.com/text2audio"; 
                mui.get(url,
				    {
				    	tex: text,  //文本,需要utf-8编译
	                	lan:"zh",   //固定值,只支持中英
	                	ctp:"1",   //web端的请求
	                	cuid:"1871115",   //自己定义的用户id
	                	tok:"24.9232da8697fe6621dbe221b85bceaea0.2592000.1508395390.282335-10139214"
				    },
				    function(data,stats,xhr){
				    	
				    	var ct = xhr.getResponseHeader("content-type") || "";
						if(ct.indexOf('application/json') > -1){
							// 语音合成错误
							console.log(data);
						} else if(ct.indexOf('audio/mp3') > -1){
							// 语音合成成功
							
							printLog("成功了");							
				     
				      //  var blob = new Blob([data],{"type":"audio/mp3"});
					  //  var blobUrl = URL.createObjectURL(blob);    
//					    printLog(blob.type);
//					    printLog(data.length);
//					    printLog(blobUrl);
//					    var audio = new Audio(blobUrl);	
//					 
//                        audio.play();
                        //audio.load();
                       //document.getElementById('videoMedia').setAttribute("src",blobUrl);
				                 
                      
//                     var data11 = atob(xhr.response.retData);
//						var	result = new Unit8Array(data11.length);
//						var audioUrl;
//  
//						for(var i=0,l=data11.length; i<l; i++) { 
//							result[i] = data11.charCodeAt(i) 
//						}
//						audioUrl = window.URL.createObjectURL(new Blob([result.buffer], {type:"audio/mp3"}));
//						new Audio(audioUrl).play();	

					   
				        
				    
				      // startPlay(plus.URL.createObjectURL(data));
				         // startPlay("../css/friendship.mp3"); 
						}
				
				    },"String"           //如果写json格式会报错
				);                          			
			}
			
			
			
			
			function setting(){
				mui.openWindow({
					url: "instrument-setting.html"
				});
			}
			
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');

			})(mui);
			var p = null;			
						// 开始播放,可以播放本地路径
			function startPlay(url){
			//	var ep = document.getElementById('play');
			//	ep.style.display = 'block';
				//var L = pp.clientWidth;
				p = plus.audio.createPlayer(url);
				p.play(function(){
					printLog('播放完成！');
					// 播放完成
				//	pt.innerText = timeToStr(d)+'/'+timeToStr(d);
				//	ps.style.webkitTransition = 'all 0.3s linear';
				//	ps.style.width = L+'px';
					stopPlay();
				}, function(e){
					printLog('播放音频文件"'+url+'"失败：'+e.message);
				});
				// 获取总时长
			//	var d = p.getDuration();
			//	if(!d){
			//		pt.innerText = '00:00:00/'+timeToStr(d);
			//	}
			//	pi = setInterval(function(){
			//		if(!d){ // 兼容无法及时获取总时长的情况
			//			d = p.getDuration();
			//		}
			//		var c = p.getPosition();
			//		if(!c){  // 兼容无法及时获取当前播放位置的情况
			//			return;
			//		}
			//		pt.innerText = timeToStr(c)+'/'+timeToStr(d);
			//		var pct = Math.round(L*c/d);
			//		if(pct < 8){
			//			pct = 8;
			//		}
			//		ps.style.width = pct+'px';
			//	}, 1000);
			}

			// 停止播放
			function stopPlay(){
				//clearInterval(pi);
				//pi=null;
				setTimeout(resetPlay, 500);
				// 操作播放对象
				if(p){
					p.stop();
					p=null;
				}
			}
						
			
			
		</script>
	</body>

</html>